import React from "react";

interface Prop {
    data: [{containerName: string, mdNameList: string[]}],
    trigger: (containerIndex: number, index: number) => void
}

const MdSelector: React.FC<Prop> = ({data, trigger}) => {
    const selectMenuData = data;

    const SubMenu: React.FC<{item: {mdNameList: string[]}, index: number}> = ({item, index}) => {
        return (
            <ul>
                {
                    item.mdNameList.map((_item, _index) => {
                        return (
                            <li key={_index} onClick={() => {
                                trigger(index, _index)
                            }}>
                                {_item}
                            </li>
                        )
                    })
                }
            </ul>
        )
    }

    return (
        <>
            {(() => {
                if (selectMenuData == undefined) {
                    return null
                }
                return selectMenuData.map((item, index) => {
                    return (
                        <li key={index}>
                            <h5>{item.containerName}</h5>
                            <SubMenu item={item} index={index}/>
                        </li>
                    )
                })
            })()}
        </>
    )
}

export default MdSelector;
